<template>
    <div class="share-page">
        <div class="share-main">
          <div class="score">
              <div class="score_num">{{score}}</div>
              <p>{{scoreName}}</p>
          </div>
          <div class="share-title">《{{poe.Name}}》古诗朗诵</div>
          <div class="player-tool">
            <audiop :audioPath="audioPath" :inTotalTime="inTotalTime"></audiop>
          </div>
          <div class="share-user clearfix">
            <img :src="userHead" alt="" :onerror="imgError" class="user-head left">
            <div class="user-name left">
              <span>{{userName}}</span>
              <p>邀请你来学古诗</p>
            </div>
          </div>
            <div class="share-btn"></div>

        </div>
        
    </div>
</template>

<script>
import { getParames } from  '@/utils/common'
// import { axGet,urlFun } from '@/api/index'
import audiop from './audio-player'

export default {
  name: 'playShare',
  components:{
    audiop,
  },
  data () {
    return {
      userid:getParames("userid"),
      poeid:getParames("poeid"),
      poeScore:getParames("poeScore"),
      recordid:getParames("recordid"),
	  scoreName:'',
	  score:67,
      poe:{},
      audioPath:'',
      inTotalTime:'00:00',
      userHead:'',
      userName:'佚名',
      imgError:'this.src="' + require('@/assets/img/no-head.png') + '"',
    }
  },
  created:function() {
      if(this.poeScore<60){
        this.scoreName="继续加油"
      }else {
        this.scoreName="播音员级别"
      }

      this.getRecord()
      this.getUserInfor()
      this.getPoetryInfo(this.poeid)
  },
  mounted:function() {

  },
  methods: {
      getRecord(){
          let param={}
        //   if(this.recordid){ //来自学生分享
        //     param={
        //         userId:this.userid,
        //         readLogId:this.recordid,
        //     }
        //   }else{    //来自家长分享
        //     param={
        //         userId:this.userid,
        //         poetryId:this.poeid,
        //     }
        //   }
        
        //   let axData={
        //       json:urlFun('GetReadLogInfo',param)
        //   }
        //   axGet(axData).then(res => {
        //       if(res.ResultCode==1){
        //           if(res.Value){
        //             this.audioPath=res.Value.SoundUrl
        //             this.inTotalTime=this.getTime(res.Value.Time)
        //             //   this.inTotalTime=res.Value.Length.substr(3)
        //           }else{
        //               alertMask(this.$parent,'没有录音') 
        //           }
        //       }else{
        //           alertMask(this.$parent,'录音接口错误')  
        //       }
        //   })
      },
      /* 时间 */
      getTime(time){
          let hour=Math.floor(time/3600);
          hour=hour<10?"0"+hour:hour;
          let minute=Math.floor(time%3600/60);
          minute=minute<10?"0"+minute:minute;
          let second=Math.floor(time%60);
          second=second<10?"0"+second:second;
          return minute+":"+second; 
      },
      getPoetryInfo(poeId){
          let param={
              userId:this.userid,
              id:poeId,
          }
        //   let axData={
        //       json:urlFun('GetBookPoetryInfo',param)
        //   }
        //   axGet(axData).then(res => {
        //       if(res.ResultCode==1){
        //           this.poe=res.Value;
        //       }else{
        //           alertMask(this.$parent,'诗词接口错误')  
        //       }
        //   })
      },
      getUserInfor(){
        let param={
            userId:this.userid,
        }

        // let axData={
        //     json:urlFun('GetUserInfo',param)
        // }
        // axGet(axData).then(res => {
        //     if(res.ResultCode==1){
        //         this.userHead=res.Value.Avatar
        //         this.userName=res.Value.TrueName
        //     }else{
        //         alertMask(this.$parent,'用户接口错误')  
        //     }
        // })
     },

  }
}
</script>
<style  lang="scss" scoped>
     @import '~@/assets/scss/_public.scss';
 //分享页
.share-page{
    width: 100%;
    min-height: 100vh;
    background: #ffd300 url(~@/assets/img/player/share-bg.png) no-repeat 0 0;
    background-size: 100% auto;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    padding-top: 2.98rem;
    .share-main{
        @include elementSize(6.86rem,8.6rem);
        margin: 0 auto 0.42rem;
        position: relative;
        padding-top: 3rem;
        background: #fff;
        border-radius: 0.6rem;
        box-shadow: 0 0.1rem#ffc400;
        -webkit-box-shadow: 0 0.1rem #ffc400;
        .score{
            @include elementSize(100%,3.5rem);
            background: url(~@/assets/img/player/share-s.png) no-repeat center 0;
            background-size: auto 100%;
            text-align: center;
            color: #fff;
            padding-top: 2.24rem;
            position: absolute;
            top: -1.08rem;
            left: 0;
            .score_num{
                position: absolute;
                top: .7rem;
                font-size: 1.04rem;
                color: #ffffff;
				left: 2.9rem;
				font-weight: bold;
            }
            p{
                font-size: 0.38rem;
                height: 0.86rem;
                line-height: 0.86rem;
            }
        }
    }
    .share-title{
        text-align: center;
        font-size: 0.42rem;
        color: #666;
        height: 1rem;
        line-height: 0.5rem;
        padding: 0 0.4rem;
    }
    .player-tool{
        padding: 0.18rem 0.24rem 0 0.24rem;
    }
    .share-user{
        padding: 0.46rem 0 0 0.52rem;
        background: url(~@/assets/img/player/share-blod.png) no-repeat 0 0;
        background-size: 100% auto;
        .user-head{
            @include elementSize(1rem,1rem);
            border-radius: 50%;
        }
        .user-name{
            padding-left: 0.32rem;
            span{
                display: block;
                font-size: 0.4rem;
                color: #333;
                height: 0.62rem;
                line-height: 0.62rem;
                max-width: 4rem;
                white-space:nowrap; 
                overflow: hidden;
                text-overflow:ellipsis;
            }
            p{
                font-size: 0.3rem;
                color: #666; 
                line-height: 0.32rem;
            }
        }
    }
    .share-btn{
        @include elementSize(3.5rem,1rem);
        background: url(~@/assets/img/player/no-btn.png) no-repeat 0 0;
        background-size: 100% 100%;
        margin: .3rem auto;
        a{
            display: block;
            @include elementSize(100%,100%);
        }
    }
}

</style>